<eda-dialog [inject]="dialog">
  <div body class="grid">

    <div class="col-12 md:col-2 " style="margin-top: 1em;">
      <div style="margin-bottom: 10px" class="col-12">
        <span class="p-float-label">
          <input id="tablename" type="text" pInputText [(ngModel)]="tableName">
          <label i18n="@@placeholderTableName" for="tablename">Nombre de la tabla</label>
        </span>
      </div>
      <div style="margin-bottom: 10px" class="col-12">
        <span class="p-float-label">
          <input id="separator" type="text" pInputText [(ngModel)]="delimiter">
          <label i18n="@@placeholderInputSeparator" for="separator">Separador</label>
        </span>
      </div>

      <div style="margin-bottom: 10px" class="col-12 ">
        <h6 i18n="@@addFile">Subir archivo</h6>
        <input type="file" #file style="display: none" (change)="onFilesAdded()" />
        <button pButton pRipple type="button" icon="fa fa-upload" class="p-button-rounded p-button-outlined"
          (click)="loadFile()" style="margin:0.2em"></button>

      </div>

    </div>

    <div class="col-12 md:col-10  " style="margin-top: 1em;">
      <p-table [value]="csvColumns" styleClass="p-datatable-sm">
        <ng-template pTemplate="header">
          <tr>
            <th *ngFor="let header of editFieldsHeaders">{{header}}</th>
          </tr>
        </ng-template>
        <ng-template pTemplate="body" let-row>
          <tr>
            <td>
              {{row.field}}
            </td>
            <td>
              <p-dropdown [options]="dataTypes" [(ngModel)]="row['type']" dropdownIcon="pi pi-angle-down"
                placeholder="tipo"></p-dropdown>
            </td>
            <td>
              <p-dropdown *ngIf="row['type'] ==='timestamp'" [options]="dataFormats" [(ngModel)]="row['format']"
                dropdownIcon="pi pi-angle-down" placeholder="formato" autoWidth="false" [style]="{'width':'50%'}">
              </p-dropdown>
            </td>

            <td>
              <p-dropdown *ngIf="['integer', 'numeric'].includes(row['type'])" [options]="decSeparators"
                [(ngModel)]="row['separator']" dropdownIcon="pi pi-angle-down" placeholder="separador decimal"
                autoWidth="false" [style]="{'width':'50%'}"></p-dropdown>
            </td>
          </tr>
        </ng-template>
      </p-table>
    </div>

  </div>

  <div footer>

    <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix text-right">

      <button pButton (click)="generateTable()" icon="fa fa-save" iconPos="left" i18n-title="@@saveCSV"
        title="Generar tabla" label="Generar tabla" style="background-color: #3b9a7a;"
        [disabled]="!tableName || !delimiter || !csvHeaders">
      </button>
      <button type="button" pButton (click)="closeDialog()" class="p-button-raised p-button-danger" i18n-label="@@cerrarBtn"
        label="Cerrar"></button>
    </div>

  </div>
</eda-dialog>